import React, { Component} from 'react'
//路由传参
import {withRouter} from "react-router-dom"
import {Toast,PickerView, WhiteSpace,Modal, Button, WingBlank,Picker,List,DatePicker,ImagePicker,TabBar} from "antd-mobile"
import "./index.scss"
import My from '../my/index'
import MyInformation from '../myinformation/index'
import Order from '../orderInformation/orderInformation'
import Gift from '../integral/index'
import Contactus from '../contactus/index'
import Jump from '../../assets/img/navigator_jump.png'
import requestAxios from '../../utils/myaxios'
import { BASE_URL } from '../../utils/requestPath'
import Community from '../community/index'
import IntegralLw from '../../assets/img/integral-lw.png'
const operation = Modal.operation;
var time;
var timeTwo;
class Index extends Component {

  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'redTab',
      hidden: false,
      fullScreen: false,
      naviagtorOrderStart:false,
      JumpItem:false,
      clearNaviagtorOrderTop:true,
      naviagtorOrderStartTop:true,
      tabBarColor:"white",
      goodsIntegral:false,
      userInfoNew:{},
      userInfoInsTwo:{},
      lotteMessage:"乐天说明.....乐天说明.....乐天说明........乐天说明.....",
      amazonMessage:"亚马逊说明.....亚马逊说明.....亚马逊说明....亚马逊说明.......",
      integralTopStart:false
    };
  }

  async componentDidMount(){
    document.title="EZbluナビ"
    
    //获取用户信息
    await this.getUserInfo()

    //定时器查看乐天/雅虎用户商品
    // time = setInterval(()=>{
    //   this.navigatorGoodsStart()
    // },1000)
    //监听缓存.......
    const jumpStartThree = localStorage.getItem("jumpStartThree")
    const jumpThree = JSON.parse(jumpStartThree) || {}

    //定时器监听如果用户是老用户,那么关闭......  老手....关闭 提示
    // timeTwo = setInterval(()=>{
    //     if(this.state.userInfoInsTwo.jumpStart === 1){
    //        this.setState({
    //         naviagtorOrderStartTop:false,
    //        })
    //        clearInterval(timeTwo)
    //     }
    // },1000)

}

  //获取用户信息
  getUserInfo=async()=>{
    const jumpStartStr =await JSON.parse(localStorage.getItem("jumpStart"))
    const userInfoIns = localStorage.getItem("userInfoIns")
    const user = await JSON.parse(userInfoIns) || {}

    //获取用户请求
    await requestAxios.get(BASE_URL+"/api/user/getid/"+user.id).then(res=>{
        //debugger 判断新手进入
        if(res.data.jumpStart === 0){
          //如果是新手 弹出提示,并把用户信息复制给状态
          this.setState({
            naviagtorOrderStart:true,
            JumpItem:true,
            userInfoInsTwo:res.data
          })
          console.log(res)
        }
    })
  }

  //清除商品list 点击兑换成功后第一步的提示.....
 navigatorGoodsStart =async ()=>{
   
   const jumpStartStr =await JSON.parse(localStorage.getItem("jumpStart"))
   
    //获取缓存中的jumpStart状态,如果没有存缓存,那么就关闭提示,并且清楚定时器,同时返回空值
    if(jumpStartStr !== null){
      this.setState({
        naviagtorOrderStartTop:false
      })
      clearInterval(time)
      return;
    }
 }

 //
  // naviagtorOrderStart = ()=>{
  //     this.setState({
  //       naviagtorOrderStart:false,
  //     })
  // }

  //清楚提示
  clearNaviagtorOrder = ()=>{
    //调用清除提示方法
    this.clearNaviagtorOrderTop()
  }

  //请求更改当前用户的状态.....jumpStart 数据库改为1
  requestAxiosJump = () =>{
    const userInfoIns = localStorage.getItem("userInfoIns")
    const user = JSON.parse(userInfoIns) || {}
      const id = user.id;
      const jumpStart = 1;
      const userInfo = {id,jumpStart};
      requestAxios.put(BASE_URL+"/api/user/update",userInfo).then(res=>{
            console.log(res)
      })
  }


  //清楚所有的提示以及提示页面.....
  clearNaviagtorOrderTop = ()=>{
    this.setState({
      clearNaviagtorOrderTop:false,
      JumpItem:false
    })

    //调用请求更改当前用户的状态,变为 跳过.....
    this.requestAxiosJump()
  }


  onChangeStateGoods = (e)=>{
      alert("点击了.....")
      
  }

  requestAxiosJump = () =>{
    const userInfoIns = localStorage.getItem("userInfoIns")
    const user = JSON.parse(userInfoIns) || {}
      const id = user.id;
      const jumpStart = 1;
      const userInfo = {id,jumpStart};
      // axios set jump == 1
      //debugger
      requestAxios.put(BASE_URL+"/api/user/update",userInfo).then(res=>{
            console.log(res)
      })
  }

  async integralExchangeRequest(){
    //alert("缓存打印......进来了")
    //缓存......
    const jumpStartStr = localStorage.getItem("jumpStart")
    if(jumpStartStr === null){
       this.requestAxiosJump()
       this.setState({
            goodsZIndex:0
       })
    }

    //兑换用户id
    const integralUserId = localStorage.getItem("userInfoIns");
    const integralUserInfo = JSON.parse(integralUserId) || {}
    await localStorage.setItem("jumpStart",JSON.stringify(1))

    //用多少积分兑换 
    if(integralUserInfo.id){
        let zgUserId = integralUserInfo.id;
        let goodsId = parseInt(1)
        let exchangeState = 1
        let goodsIntegralExchange = 1000
        let goodsExchange = {zgUserId,exchangeState,goodsIntegralExchange,goodsId};
        await requestAxios.post(BASE_URL+"/api/goods/exchange/add",goodsExchange).then(res=>{
            if(res.data.flag){
                console.log("兑换成功,请在兑换记录列表查看")
                Toast.success('兑换成功,存入兑换列表!!!', 2);
                //兑换成功后隐藏并显示另一个........
                this.setState({
                  naviagtorOrderStartTop:false,
                  integralTopStart:true
                })
            }else{
                Toast.offline(res.data.message, 1);
                return;
            }

        })
        // await this.componentIntegral()
        // await this.props.onClicked()

    }
    
}

  // naviagtorOrderStartTop = ()=>{
  //   this.clearNaviagtorOrderTop()
  // }

  recordIntegralClick=()=>{
    this.props.history.push("/exchangerecord")
    this.clearNaviagtorOrderTop()
  }

      render() {
        return (
          <div className="main-navigator-app"
          style={{position:"relative",zIndex:900}}
          >
            <div className="main-navigator-app-tabbar-bottom-background"></div>
            <div className="bottom_nategory_list" style={this.state.fullScreen ? { height: '100%', width: '100%',zIndex:10 } : { height: '100vh' }}>
          <TabBar
            unselectedTintColor="#949494"
            tintColor="#33A3F4"
            barTintColor={`${this.state.JumpItem == true?'rgba(0,0,0,0.5)':'white'}`} // rgba(0,0,0,0.5)   //white
            hidden={this.state.hidden}
            tabBarPosition="top"
            
          >
           <TabBar.Item
              icon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: 'url(http://qiniuyun.ezbluvip.com/lw.png) center center /  21px 21px no-repeat',
                  position:"relative",
                  zIndex:1000
                }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: 'url(http://qiniuyun.ezbluvip.com/lw_blue.png) center center /  21px 21px no-repeat',
                  position:"relative",
                  zIndex:1000
                }}
                />
              }
              title="礼物中心"
              key="Friend"
              //dot
              selected={this.state.selectedTab === 'greenTab'}
              //点击跳转不同nginx
              onPress={() => {
                this.setState({
                  selectedTab: 'greenTab',
                });
              }}
            >
              {/* {this.renderContent('Friend')} */}
              <Gift　fuOnClickedStart={this.onChangeStateGoods.bind(this)}></Gift>
            </TabBar.Item>
            {/* <TabBar.Item
              icon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: 'url(http://qiniuyun.ezbluvip.com/jf.png) center center /  21px 21px no-repeat' }}
                />
              }
              selectedIcon={
                <div style={{
                  width: '22px',
                  height: '22px',
                  background: 'url(http://qiniuyun.ezbluvip.com/jf_blue.png) center center /  21px 21px no-repeat' }}
                />
              }
              title="积分管理"
              key="Koubei"
              //badge={'new'}
              selected={this.state.selectedTab === 'redTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'redTab',
                });
              }}
              data-seed="logId1"
            >
              <Order></Order>
            </TabBar.Item> */}
            
            <TabBar.Item
              title="社区发帖"
              key="Life"
              icon={<div style={{
                width: '22px',
                height: '22px',
                background: 'url(http://qiniuyun.ezbluvip.com/xx.png) center center /  21px 21px no-repeat' }}
              />
              }
              selectedIcon={<div style={{
                width: '22px',
                height: '22px',
                background: 'url(http://qiniuyun.ezbluvip.com/xx_blue.png) center center /  21px 21px no-repeat' }}
              />
              }
              selected={this.state.selectedTab === 'blueTab'}
              //badge={1}
              onPress={() => {
                this.setState({
                  selectedTab: 'blueTab',
                });
              }}
              data-seed="logId"
            >
              {/* <Contactus></Contactus> */}
              <Community></Community>
            </TabBar.Item>
            <TabBar.Item
              icon={{ uri: 'http://qiniuyun.ezbluvip.com/wd.png' }}
              selectedIcon={{ uri: 'http://qiniuyun.ezbluvip.com/wd_blue.png' }}
              title="我的信息"
              key="my"
              selected={this.state.selectedTab === 'yellowTab'}
              onPress={() => {
                this.setState({
                  selectedTab: 'yellowTab',
                });
              }}
            >
              <MyInformation></MyInformation>
            </TabBar.Item>
          </TabBar>
        </div>
             {this.state.JumpItem?
              <div className="navigator-guide-page">
              {this.state.naviagtorOrderStart? <p className="navigator-guide-page-img">
                {/* <img src={Jump}></img> */}
              </p>:""}
                <div className="naviagtor-guide-page-right">
                {/* {this.state.naviagtorOrderStart?
                  <div> 
                    <h4 onClick={this.clearNaviagtorOrder}>跳过引导</h4>
                    <h3 onClick={this.naviagtorOrderStart}>确定</h3>
                    <p className="naviagtor-guide-page-message">说明...说明..说明..说明........................</p>
                     </div>
                 :""
                } */}
                </div>
                {this.state.naviagtorOrderStartTop?
                    <div className="navigator-guide-page-order-top"> 
                     {/* goods开始 */}
                     <div 
                                //key={index}
                                //style={index === 0?{zIndex:this.state.goodsZIndex,background:"#fff"}:{}}
                                className="main-integral-300-goods-navigator" 
                                    >
                                {/* <div className="main-integral-top-goods"
                                onClick={this.onGoodsListDetail.bind(this,value)}
                                >
                                    <h4>{value.goodsName}</h4>
                                    <h5>{value.goodsIntegralExchange}分兑换</h5>
                                    
                                </div> */}
                                <Button 
                                className="main-integral-bottom"
                                style={{fontSize:14,}}
                                onClick={() => operation([
                                    { text:'一次性电子烟',style:{textAlign:'center',color:"rgb(235, 37, 4)",fontWeight:900}},
                                    { text: '立即兑换',style:{background:"skyblue",color:"#fff",textAlign:"center"}, onPress: () => {
                                        
                                        //alert("确定.....")
                                        // //获取当前用户积分,并且赋值.....
                                        // await this.componentIntegral()
                                       
                                        // //先弹出,后赋值....
                                        // if(this.state.userInfoNew.jumpStartTwo !== 1){
                                        //     localStorage.setItem("jumpStartThree",3)
                                        //     //debugger
                                        //     await this.props.onClicked()
                                        // }

                                        // await this.getUserInfo()
                                        
                                        // // //判断当前用户的积分和当前商品的积分是否足够
                                        // if(parseInt(userCountIntegral) < parseInt(value.goodsIntegralExchange)){
                                        //     Toast.offline('积分不够请充值 !!!', 1);
                                        //     return;
                                        // }

                                        // Toast.loading('Loading...', 1, () => {
                                        //     console.log('Load complete !!!');
                                        // });

                                        // // //添加兑换信息....
                                        this.integralExchangeRequest()

                                        // //乐天,雅虎商品列表,,,,兑换成功,像父组件传递参数或缓存localStorage设置jumpStart........
                                        // //,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
                                        // //this.props.fuOnClickedStart()
                                        
                                        // await this.requestAxiosJump()
                                        // if(jumpStartStr === 1){
                                            
                                        // }
                                        
                                    }},
                                    ])}
                                >代金</Button>
                                <div 
                                //onClick={this.onGoodsListDetail.bind(this,value)} 
                                className="main-goods-integral-images"> 
                                    <img src="http://qiniuyun.ezbluvip.com/1-1.png"></img>
                                </div>
                                <h3>墨盒</h3>
                                <h5 className="main-goods-integral-bottom-h5">代金<span>1000</span></h5>
                            </div>
                     {/* goods结束 */}
                    <p className="navigator-guide-page-order-input">
                    <img src={Jump}></img>
                    </p>
                    <div className="navigator-good-clear"> 
                      <h4 className="naviagtor-good-clear-order" onClick={this.clearNaviagtorOrderTop}>跳过引导</h4>
                      {/* <h3 className="navigator-good-clear-ok" onClick={this.naviagtorOrderStartTop}>下一步</h3> */}
                      <p className="naviagtor-guide-page-good-message">{this.state.userInfoInsTwo.platformAddress !== 2?`${this.state.lotteMessage}`:`${this.state.amazonMessage}`  }
                      </p>
                      </div>

                    </div>:""  
                }
                 {/* 兑换记录 */}
                {this.state.integralTopStart?<div
                className="navigator-good-clear-start"
                >
                    <div className="navigator-good-clear-top"> 

                        <h4 className="naviagtor-good-clear-order-top" onClick={this.clearNaviagtorOrderTop}>跳过引导</h4>
                        {/* <h3 className="navigator-good-clear-ok" onClick={this.naviagtorOrderStartTop}>下一步</h3> */}
                        <p className="naviagtor-guide-page-good-message-top">
                        クリックすると引換履歴ページへ
                        </p>

                        <div className="main-integral-content-top"
                        style={{background:"#fff"}}
                        onClick={this.recordIntegralClick}
                        >
                            <img src={IntegralLw}></img>
                            <h3>引換履歴</h3>
                        </div>

                      </div>
                
                </div>:""}
              </div>:"" 
            }

           
          </div>
        );
      }
}
export default withRouter(Index)
